<template>
    <div>
        <el-form :model="dataForm" v-loading="loading" >
            <el-form-item>
                <el-select v-model="dataForm.projectId"  clearable  placeholder="选择项目" style="width:160px">
                    <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.id"></el-option>
                </el-select>
                &nbsp;
                <el-input v-model="dataForm.keywords" placeholder="输入关键字查询" style="width:600px"
                @keyup.enter.native="searchData">
                    <el-button type="primary" @click="searchData" slot="append" icon="el-icon-search" 
                    v-loading.fullscreen.lock="loading">查询</el-button>
                </el-input>
                
            </el-form-item>
        </el-form>
        <el-form :inline="true" >
            <el-form-item label="类型">
                <el-checkbox-group v-model="dataForm.fileType">
                    <el-checkbox v-for="(item,index) in fileTypes" :key="index" :label="item" name="fileType">{{item}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div style="marigin-top:20px; color:#A29F9F">
            <div v-for="(item,index) in tableData" :key="index" :label="item" style="margin-top:24px">
                <el-row>
                    <el-col :span="18">
                        <div v-if="item.title!=null" v-html="item.title" style="color:#000000"></div>
                        <div v-else style="color:#000000">{{item.file_name}}</div>
                    </el-col>
                    <el-col :span="6">
                        <el-tag type="success" >{{item.project_name}}</el-tag>
                        &nbsp;
                        <el-button type="primary" size="mini" plain icon="el-icon-download">下载</el-button>
                    </el-col>
                </el-row>
                
                <div v-html="item.content" style="margin-top:5px; font-size:14px"></div>
            </div>

        </div>
    </div>
</template>


<script>
    export default {
      data() {
        return {
          loading: false,
          dataForm: {
            keywords: '',
            projectId: '',
            fileType:[],
            page: 1,
            size: 20
          },
          fileTypes:["doc","docx","xls","xlsx","csv","ppt","pdf","txt","wps","html","htm","asp"],
          tableData:[],
          projectList:[]
        };
      },
      created() {
          this.getProjectList()
      },
      methods: {
        searchData(){
            if(!this.dataForm.keywords){
                this.$notify({
                    title: '温馨提示', message: '请输入关键字哦!', type: 'warning'
                });
                return false;
            }
            this.loading = true
            this.getRequest('/search', this.dataForm).then(resp => {
                this.loading = false
                if (resp && resp.code==0) {
                    this.tableData = resp.data;
                }
            })
        },
        getProjectList(){
            this.getRequest('/project-info/list', 
                {page: 1, limit: 1024}).then(resp => {
                if (resp.code == 0) {
                    this.projectList = resp.data;
                }
            })
        }
      }
    }
</script>

<style scoped>
    .defaultForm {
        margin: 10px 0px 0px 25px;
        width: 80%;
    }
    .el-cascader {
      width: 60%;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-align: center;
    }
    .avatar {
        width: 64px;
        height: 64px;
        display: block;
    }
</style>